{{define "cp_status"}}
{{$botOwner := .IsBotOwner}}
{{template "cp_head" .}}

<header class="page-header">
	<h2>Bot status <span class="refresh-message"></span></h2>
</header>

{{template "cp_alerts" .}}

<section class="card card-featured card-featured-success mb-4">
	<header class="card-header">
		<h2 class="card-title">Summary</h2>
	</header>
	<div class="card-body">
		<ul>
			<li>Hosts: <code>{{len .BotStatus.HostStatuses}}</code></li>
			<li>Nodes: <code>{{.BotStatus.NumNodes}}</code></li>
			<li>Shards: <code>{{.BotStatus.TotalShards}}</code></li>
			<li>Offline shards: <code>{{len .BotStatus.OfflineShards}}</code></li>
			<li>Min, Max, Avg Events/s:
				<code>{{printf "%.1f" .BotStatus.EventsPerSecondMin}}</code>/<code>{{printf "%.1f" .BotStatus.EventsPerSecondMax}}</code>/<code>{{printf "%.1f" .BotStatus.EventsPerSecondAverage}}</code>
			</li>
			<li>Unavailable guilds: <code>{{.BotStatus.UnavailableGuilds}}</code></li>
			<li>Min Uptime: <code>{{.BotStatus.UptimeMin}}</code></li>
			<li>Max Uptime: <code>{{.BotStatus.UptimeMax}}</code></li>
		</ul>
	</div>
</section>
<script>
  let maxRefreshTimer = 30000;
  let interval = 1000;
  let totalExpired = 0;
    setInterval(()=>{
      if(totalExpired < maxRefreshTimer){
        $(".refresh-message").text(`(Refreshing in ${Math.ceil((maxRefreshTimer - totalExpired)/1000)} seconds)`);
        totalExpired += interval;
        return;
      }
      window.location.reload()
  }, interval)
</script>

<style>
	.shard {
		width: 3rem;
		height: 3rem;
		float: left;
		padding: 2px;
		border: 0.15rem solid #0000003f;
		min-width: 3rem;
		border-radius: 0.5rem;
		margin: 1px;
	}

	.shard:hover {
		border-color: #000000cb !important;
	}

	.shard-low-events {
		border: 0.25rem solid #ff0022 !important;
	}

	.shard-status-ready {
		background-color: rgb(47, 255, 47);
	}

	.shard-status-disconnected {
		background-color: rgb(255, 126, 126);
	}

	.shard-status-connecting {
		/* background-color: rgb(156, 249, 241); */
		background-color: rgb(223, 255, 41);
	}

	.shard-status-identifying {
		background-color: rgb(223, 255, 41);
	}

	.shard-status-resuming {
		background-color: rgb(223, 255, 41);
		/* background-color: rgb(134, 134, 255); */
	}

	.shard-quick-details {
		background: inherit;
		background-clip: text;
		-webkit-background-clip: text;
		color: transparent;
		filter: invert(1) grayscale(1);
		-webkit-filter: invert(1) grayscale(1);
	}

	.shardcluster {
		flex-wrap: wrap;
	}

	.node-row {
		border-radius: 0.5rem;
		align-items: center;
	}

	.node-row:nth-child(odd) {
		background-color: #0000006b;
	}

	.shard-quick-details p {
		margin: 0;
		font-size: 0.6rem;
	}

	.shard-id {
		font-size: 1rem !important;
	}
</style>

{{range .BotStatus.HostStatuses}}
<section class="card card-featured card-featured-success mb-4">
	<header class="card-header">
		<h2 class="card-title">Host {{.Name}}</h2>
	</header>
	<div class="card-body host-status">
		{{range .Nodes}}
		<div class="row node-row">
			<div class="col-3">
				<b>Node {{.ID}}</b> - <small>{{humanizeDurationMinutes .Uptime}}</small>
			</div>
			<div class="col-9">
				<div class="shardcluster d-flex">
					{{range $i, $v := .Shards}}
					<div class="shard shard-status-{{lower (.ConnStatus.String)}} {{if lt .EventsPerSecond 1.0}}shard-low-events{{end}}"
						data-toggle="tooltip" data-html="true" title='{{template "cp_status_tooltip" .}}'>
						<div class="shard-quick-details">
							<p class="shard-id"><b>{{.ShardID}}</b></p>
							<p>
								{{printf "%.1f" .EventsPerSecond}}/s
							</p>
						</div>
					</div>
					{{end}}
				</div>
			</div>
		</div>
		{{end}}
		<!-- /.row -->
	</div>
</section>
{{end}}

{{template "cp_footer" .}}

{{end}}

{{define "cp_status_tooltip"}}
Events/s: {{printf "%.1f" .EventsPerSecond}} <br />
TotalEvents: {{.TotalEvents}} <br />
Last Heartbeat: {{humanizeDurationSeconds (currentTime.Sub .LastHeartbeatSend)}} ago <br />
Last Heartbeat Ack: {{humanizeDurationSeconds (currentTime.Sub .LastHeartbeatAck)}} ago <br />
Unavailable Guilds: {{.UnavailableGuilds}}/{{.NumGuilds}}<br />
{{end}}